<template>
  <view>
    <!-- 1. 头部搜索框 -->
    <search />
    <!-- 2. tabs 选项卡 -->
    <u-tabs :list="tabList" lineColor="#EB4450" :scrollable="false"></u-tabs>
    <!-- 3. 商品列表 -->
    <view class="goods-list">
      <!-- 商品列表渲染 -->
      <navigator
        :url="`/goodsPkg/goods_detail/goods_detail?goods_id=${item.goods_id}`"
        class="goods-item"
        v-for="item in goodsList"
        :key="item.goods_id"
      >
        <image
          :src="item.goods_small_logo"
          class="goods-image"
          mode="aspectFit"
        />
        <!-- 商品信息 -->
        <view class="goods-info">
          <view class="goods-name">{{ item.goods_name }}</view>
          <view class="goods-price">{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
    <!-- 底部提示 -->
    <!-- <view v-if="goodsList.length && total === goodsList.length" class="bottom-tip">我也是有底线的~</view> -->
    <view v-if="total === goodsList.length" class="bottom-tip"
      >我也是有底线的~</view
    >
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [{ name: "综合" }, { name: "销量" }, { name: "价格" }],
      q: {
        query: "",
        cid: "",
        pagenum: 1,
        pagesize: 10,
      },
      goodsList: [],
      total: null,
    };
  },
  onLoad(options) {
    // 获取携带的参数
    // console.log(options)
    // 将参数设置给 q
    // 传统写法
    // this.q.query = options.query
    // this.q.cid = options.cid
    // 展开运算符合并对象, 要注意先后顺序!
    // this.q = { ...this.q, ...options  }
    // 对象浅拷贝
    Object.assign(this.q, options);
    this.getGoodsList();
  },
  onReachBottom() {
    // // console.log('触底啦!')
    // if (this.goodsList.length === this.total) {
    //   // 说明没有新数据了
    //   // 不要再加载了, 并提示用户
    //   uni.showToast({ title: '没有更多啦', icon: 'none' })
    // } else {
    //   this.q.pagenum++
    //   this.getGoodsList()
    // }
    // console.log('触底啦!')
    if (this.goodsList.length === this.total) return;
    this.q.pagenum++;
    this.getGoodsList();
  },
  async onPullDownRefresh() {
    // console.log('用户下拉了')
    // 重置数据和状态后重新渲染
    this.goodsList = []
    this.q.pagenum = 1
    this.total = null
    await this.getGoodsList()
    // 关闭下拉刷新的动画
    uni.stopPullDownRefresh()
  },
  methods: {
    async getGoodsList() {
      // uni.$u.http.get('/user/login', {params: {userName: 'name', password: '123456'}})
      const { message } = await uni.$u.http.get("/goods/search", {
        params: this.q,
      });
      // console.log(message)
      this.goodsList.push(...message.goods);
      this.total = message.total;
    },
  },
};
</script>

<style lang="scss">
.goods-list {
  .goods-item {
    display: flex;
    border-bottom: 1rpx solid #ddd;
    padding: 25rpx;
    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      /* 垂直方向两端对齐 */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;
      .goods-name {
        /* 多行超出隐藏 */
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .goods-price {
        color: #eb4450;
        /* 前面的价格符号 */
        &::before {
          content: "￥";
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}
.bottom-tip {
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  color: #888585;
}
</style>